<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" type="text/css" href="content/common/layui/css/layui.css"/>
  <link rel="stylesheet" type="text/css" href="content/default/css/common.css"/>

  <style>
     
      ul{
          list-style: none;
          padding: 10px 30px 60px;
      }
     .top{
         border-bottom: 2px solid #ffffff;
         font-size: 14px;
         border-left: 1px solid  #f2f2f2;
         border-right: 1px solid  #f2f2f2;
     }
      .li_title{
           height: 40px;
           background-color: #f2f2f2;
           padding: 10px 20px;
           box-sizing: border-box;
           line-height: 20px;
      }
      .li_content{
          height: 90px;
          background-color: #ffffff;
          box-sizing: border-box;
          padding: 10px 20px;
      }
      .img_up{
          margin-left: 15px;
          cursor: pointer;
      }
      .img_down{
          margin-left: 10px ;
          cursor: pointer;
      }
      .img_rf{
          float:right;     
          margin-top:2px;
          cursor: pointer;
          transform: rotate(0deg);
          transition: .3s;
          display: block;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
      }
      .showMore{
          transform: rotate(-180deg);
          transition: .3s;
      }
      .cklist{
          margin-top: 25px;
      }
      .bottom_btn{
          text-align: right;
          height:60px;
          width: 100%;
          box-sizing: border-box;
          position: fixed;
          bottom: 0;
          right: 0;
          background: #fff;
          padding: 10px 50px 10px 0;
        }
      .btn_rau{
          border-radius: 4px;
          width: 95px;
          height: 40px;
          box-sizing: border-box;
          border: 0;
          background: transparent;
      }
      .sub-btn{
          background: #206dee;
          color: #fff;
      }
      .sub-btn:hover{
          background: #3198f9;
      }
      .cancel-btn{
          border: 1px solid #999999;
          color: #666;
          margin-right: 25px;
      }
      .cancel-btn:hover{
          background: #f2f2f2;
      }
  </style>
 </head>
 <body>
    
    <ul>
        <li class="top">
            <div class="li_title">
              <input type="checkbox"  name="yh" onclick="getAllcheck('yh',this)"  title="隐患"/>隐 患
              <img class="img_down" src="content/default/image/down_001.png"/>
              <span class="img_rf showMore"><img src="content/default/image/down_01.png"></span>
            </div>
            <div class="li_content">
                <div>
                    <input type="checkbox" name="yh"  title="隐患"/>重大隐患（条）
                    <input type="checkbox" name="yh" title="未销项重大隐患（条）"/>未销项重大隐患（条）
                    <input type="checkbox" name="yh" title="重大隐患整改率"/>重大隐患整改率
                    <input type="checkbox" name="yh" title="集团年度检查（次）"/>集团年度检查（次）
                    <input type="checkbox" name="yh" title="集团检查完成率"/>集团检查完成率
                </div>
                <div class="cklist">
                    <input type="checkbox" name="yh"  title="隐患"/>重大隐患（条）
                    <input type="checkbox" name="yh" title="未销项重大隐患（条）"/>未销项重大隐患（条）
                    <input type="checkbox" name="yh" title="重大隐患整改率"/>重大隐患整改率
                    <input type="checkbox"name="yh"  title="集团年度检查（次）"/>集团年度检查（次）
                   
                </div>
            </div>
        </li>
        
        <li class="top">
            <div class="li_title">
                <input type="checkbox"  name="fx" onclick="getAllcheck('fx',this)" title="风险" value="风险" />风 险
                <img class="img_up"  src="content/default/image/up.png"/>
                <img class="img_down" src="content/default/image/down_001.png"/>
                <span class="img_rf showMore"><img src="content/default/image/down_01.png"></span>
            </div>
            <div class="li_content">
                <div>
                    <input type="checkbox" name="fx"   title="隐患"/>重大隐患（条）
                    <input type="checkbox"  name="fx"  title="未销项重大隐患（条）"/>未销项重大隐患（条）
                    <input type="checkbox" name="fx"   title="重大隐患整改率"/>重大隐患整改率
                    <input type="checkbox" name="fx"   title="集团年度检查（次）"/>集团年度检查（次）
                    <input type="checkbox" name="fx"   title="集团检查完成率"/>集团检查完成率
                </div>
                <div class="cklist">
                    <input type="checkbox" name="fx"   title="隐患"/>重大隐患（条）
                    <input type="checkbox" name="fx"  title="未销项重大隐患（条）"/>未销项重大隐患（条）
                    <input type="checkbox" name="fx"  title="重大隐患整改率"/>重大隐患整改率
                    <input type="checkbox" name="fx"   title="集团年度检查（次）"/>集团年度检查（次）
                   
                </div>
            </div>
        </li>
        <li class="top">
            <div class="li_title">
                <input type="checkbox"  title="培训" value="培训"/>培 训
                <img class="img_up" src="content/default/image/up.png"/>
              <img class="img_down" src="content/default/image/down_001.png"/>
              <span class="img_rf showMore"><img src="content/default/image/down_01.png"></span>
            </div>
        </li>
        <li class="top">
            <div class="li_title">
                <input type="checkbox"  title="应急" value="应急"/>应 急
                <img class="img_up" src="content/default/image/up.png"/>
              <img class="img_down" src="content/default/image/down_001.png"/>
              <span class="img_rf showMore"><img src="content/default/image/down_01.png"></span>
            </div>
        </li>
        <li class="top">
            <div class="li_title">
                <input type="checkbox"  title="两外" value="两外"/>两 外
                <img class="img_up" src="content/default/image/up.png"/>
                <span class="img_rf showMore"><img src="content/default/image/down_01.png"></span>
            </div>
        </li>
        <li class="top">
            <div class="li_title">
                <input type="checkbox"  title="专项" value="专项"/>专 项
                <img class="img_up" src="content/default/image/up.png"/>
                <span class="img_rf showMore"><img src="content/default/image/down_01.png"></span>
            </div>
        </li>
    </ul>
   
        <div class="bottom_btn">
         <button type="button" class="btn_rau cancel-btn">取消</button>
         <button type="button" class="btn_rau sub-btn">确定</button>
        </div>
      
    
  <script type="text/javascript" src="content/common/jquery-3.3.1.min.js"></script>
   <script type="text/javascript">
    $(function(){
        $(".img_down").hover(function(){
            $(this).attr("src","content/default/image/down_active.png");
        },function(){
            $(this).attr("src","content/default/image/down_001.png");
        });
        $(".img_up").hover(function(){
            $(this).attr("src","content/default/image/down.png");
        },function(){
            $(this).attr("src","content/default/image/up.png");
        });

        $(".img_rf").click(function(){
            $(this).toggleClass("showMore");
            var parents=  $(this).parent().parent();
            var prev= parents.children(".li_content");
            prev.slideToggle();
        });
    });
    function getAllcheck(val,self){
       $('input[name="'+val+'"]').each(function(){
            $('input[name="'+val+'"]').attr('checked',$(self).prop('checked'))
       });
    }
   </script>
 </body>
</html>